<template>
  <div class="grid grid-cols-4 gap-4 pb-7.5">
    <div
      class="px-4 pt-5 pb-7.5 bg-white rounded-md overflow-hidden relative box-border border-indigo-600 border-solid hover:border-1"
      v-for="(item, index) in props.data"
      :key="index"
      @mouseenter="enterShow(index)"
      @mouseleave="leaveShow()"
      @click="handleItemClick(item.Key)"
    >
      <!-- 头部 -->
      <div class="flex items-center">
        <div>
          <img style="width: 46px" :src="item.Icon" />
        </div>
        <div class="font-bold ml-2.5"> {{ item.name }} </div>
      </div>
      <!-- 介绍 -->
      <div class="text-xs mt-5"> {{ item.synopsis }}</div>
      <!-- 小图标 -->
      <div v-show="indexShow == index" class="absolute top-2 right-2">
        <Icon :size="14" icon="ion:star-outline" color="#4f46e5" />
      </div>
      <div v-show="indexShow == index" class="absolute bottom-2 right-2">
        <Icon :size="14" icon="fluent-mdl2:forward" color="#4f46e5" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{
  data: {
    name: string
    Key: string
    Icon: string
    synopsis: string
  }[]
}>()
// 子组件向父组件传值
const emit = defineEmits(['handleItemClick'])
const handleItemClick = (key) => {
  emit('handleItemClick', key)
}

// main鼠标移入移出
const indexShow = ref(-1)
const enterShow = (index: number) => {
  indexShow.value = index
}
const leaveShow = () => {
  indexShow.value = -1
}
</script>
